<template>
  <div class="Row">
     <div class="title">
        <p>{{$t('home.recommendPlaylist')}}</p>
        <p v-show="isShow">{{$t('home.seeMore')}}</p>
      </div>
      <ul :class="['row-container',circle]">
        <Row-item v-for="(item) in rowData" :circle="circle" style="position: relative;" :key="item.id" :item="item" :clickhandler="getMusicDetail">
          <button :style="{'width':'50px','height':'50px','transform':`scale(${num})`}" class="play-btn" @click="toggle">
             <svg-icon icon-class="play" style="position: absolute;margin-left: 4px;cursor: default;"></svg-icon>
          </button>
        </Row-item>
      </ul>
  </div>
</template>

<script>
import RowItem from './RowItem/RowItem';

export default {
  name: 'PlaymusicRow',
  components: { RowItem },
  data() {
    return {
      rowData: [],
      circle: '',
      num: 1,
      isShow: false,
    };
  },
  props: ['type'],
  created() {
    if (this.$attrs.circle === '') {
      this.circle = 'circle';
    }
    if (this.$attrs.more === '') {
      this.isShow = true;
    }
    if (this.type) {
      this.showRowData();
    } else {
      this.showAppleMusic();
    }
  },
  methods: {
    toggle() {
      this.num = 0.9;
      setTimeout(() => {
        this.num = 1;
      }, 100);
    },
    showRowData() {
      const type = this.type;
      const params = {
        getRecommendList: {
          limit: 10,
        },
        getArtistList: {
          type: -1,
          area: 96,
          limit: 6,
          initial: 'a',
        },
        getNewAlbum: {
          limit: 10,
          area: 'EA',
        },
        getToplist: {
          limit: 5,
        },
      };
      this[`$${type}`](params[type]).then((res) => {
        const itemContent = {
          getRecommendList: () => Object.freeze(res.data.result),
          getArtistList: () => Object.freeze(res.data.artists),
          getNewAlbum: () => Object.freeze(res.data.albums.map((item) => {
            // eslint-disable-next-line no-param-reassign
            item.copywriter = item.artist.name;
            return item;
          })),
          getToplist: () => Object.freeze(res.data.list.map((item) => {
            // eslint-disable-next-line no-param-reassign
            item.copywriter = item.updateFrequency;
            // eslint-disable-next-line no-param-reassign
            item.picUrl = item.coverImgUrl;
            return item;
          }).slice(0, 5)),
        };
        this.rowData = itemContent[type]();
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      });
    },
    getMusicDetail(id) {
      this.$router.push({ name: 'login', params: { id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    p{
        font-size: 24px;
        font-weight: bold;
      &:nth-of-type(2){
        font-size: 13px;
        font-weight: 600;
        opacity: .68;
      }
    }
}
.play-btn{
    visibility:hidden;
    position: absolute;
   top: 30%;
    left: 37%;
    color: #fff;
    background: hsla(0,0%,100%,.14);
    border: 1px solid hsla(0,0%,100%,.08);
    border-radius: 50%;
    cursor: default;
    transition: .2s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.play-btn:hover {
  background:rgba(225,225,225,.3);
}
.Row{
  position: relative;
 margin-top: 54px;
 ul{
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 44px 24px;
 }
}
/deep/ .circle{
  grid-template-columns: repeat(6, 1fr)!important;
}
.row-container li:hover .play-btn{
  visibility: inherit;
}
</style>
